<template>
	<view class="ListMyData">
		<view class="list-msg">
			<view class="">头像</view>
			<view class="list-msg-img" @click="upImg">
				<image :src="userImg" mode="widthFix"></image>
			</view>
		</view>
		<view class="list-msg">
			<view class="">用户id</view>
			<view class="list-msg-text">
				{{listInfo.userId}}
			</view>
		</view>
		<view class="list-msg-name">
			<u-field
				v-model="nickName"
				input-align="right"
				label="昵称"
				label-width="100rpx"
				@blur="newName"
				:placeholder="listInfo.nickName"
			>
			</u-field>
		</view>
		<view>
			<u-field
				v-model="desc"
				input-align="right"
				:placeholder="listInfo.desc"
				label="简介"
				label-width="100rpx"
				type="textarea"
				@blur="newDesc"
			>
			</u-field>
		</view>
		<!-- 弹窗 -->
		<view class="">
			<u-popup v-model="showUp" mode="bottom" :closeable="true" >
					<view class="picInput-content" @click="chooseImg">
						<image :src="smallAvatar" mode="widthFix"></image>
					</view>
				<u-button>选择图片</u-button>
			</u-popup>
		</view>
	</view>
</template>

<script>
	import {postNickName,postUpdateDesc} from "network/mine.js"
	
	export default{
		mounted() {
			this.nickName = this.listInfo.nickName
			this.desc = this.listInfo.desc==""?'这家伙很懒，什么都没留下':this.listInfo.desc
		},
		data() {
			return {
				nickName:"",
				desc:"",
				showUp:false,
				smallAvatar:"https://tse1-mm.cn.bing.net/th/id/R-C.d3669c0f132f1aa615ab838cb97e7196?rik=Zr5dZIFLkFVEvQ&riu=http%3a%2f%2fbpic.588ku.com%2felement_pic%2f01%2f37%2f77%2f43573c60704e423.jpg&ehk=0c5kqSczQ%2bO0zgeOxPMXgIC%2bXOWeNd%2bDtFSi2M7AWDQ%3d&risl=&pid=ImgRaw&r=0"
			}
		},
		props:{
			listInfo:Object,
			userImg:String
		},
		methods:{
			upImg(){
				this.showUp = true
			},
			newName(){
				postNickName(this.nickName).then(res=>{
					if(res.data.code == "C001"){
						uni.showToast({
						    title: res.data.msg,
						    duration: 2000,
							icon:'none'
						})
					}
				})
			},
			newDesc(){
				postUpdateDesc(this.desc).then(res=>{
					if(res.data.code == "D001"){
						uni.showToast({
						    title: res.data.msg,
						    duration: 2000,
							icon:'none'
						})
					}
				})
			},
			chooseImg(){
				uni.chooseImage({
					count:1,
					sizeType:['original', 'compressed'],
					sourceType: ['album'],
					success: (res) => {
						this.showUpImg = false
						let imgMsg = {}
						imgMsg.type = res.tempFiles[0].type.split("/")[1]
						uni.request({
							url:res.tempFilePaths[0],
							responseType:"arraybuffer",
							success: (e) => {
								let base64Img = uni.arrayBufferToBase64(e.data)
								imgMsg.coding=base64Img
								this.$emit("commitAvatar",imgMsg)
							}
						})	
					}
				})
			}
		}
	}
</script>

<style scoped>
	.ListMyData{
		background-color: #FFFFFF;
		width: 92%;
		margin: -50rpx 30rpx 0rpx 30rpx;
		border-radius: 20rpx;
		padding-top: 20rpx;
	}
	.list-msg{
		display: flex;
		justify-content: space-between;
		padding: 20rpx 28rpx; 
	}
	.list-msg-img{
		width: 50rpx;
		height: 50rpx;
	}
	.list-msg-img>image{
		width: 100%;
	}
	.picInput-content{
		width: 200rpx;
		height: 200rpx;
		border:1rpx solid #999999 ;
		margin:30rpx auto ;
	}
	.picInput-content>image{
		width: 100%;
		max-height: 200rpx;
		z-index: -99;
	}
</style>
